<template>
  <div class="job-info">
    <el-tooltip effect="dark" content="打印岗位信息" placement="bottom">
      <i class="el-icon-printer" @click="$router.push({name: 'print',query: { type: 'job', id: $route.query.id }})" />
    </el-tooltip>
    <!-- 基础信息 -->
    <el-form label-width="140px">
      <!-- 岗位 职级 -->
      <el-divider>基本信息</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="岗位">
            <el-input v-model="formData.post" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职级">
            <el-input v-model="formData.rank" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 转正日期 转正状态 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="转正日期">
            <el-date-picker v-model="formData.dateOfCorrection" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="转正状态">
            <el-select v-model="formData.stateOfCorrection" placeholder="请选择">
              <el-option v-for="item in EmployeeEnum.positiveType" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 调整司龄 调整工龄 -->
      <el-row>
        <el-col :span="12">
          <el-form-item class="formInfo" label="调整司龄(天)">
            <el-input v-model="formData.adjustmentAgedays" type="number" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="调整工龄">
            <el-input v-model="formData.adjustmentOfLengthOfService" placeholder="0.00年" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- HRBP 汇报对象 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="HRBP">
            <el-select v-model="formData.hrbp" filterable placeholder="请选择">
              <el-option v-for="item in depts" :key="item.id" :label="item.manager" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="汇报对象">
            <el-select v-model="formData.reportId" filterable placeholder="请选择">
              <el-option v-for="item in depts" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 首次参加工作时间 转正评价 -->
        <el-col :span="12">
          <el-form-item label="工作城市">
            <!-- <el-input v-model="formData.workingCity" placeholder="请输入" clearable /> -->
            <el-cascader v-model="temp1" :props="props" separator=" " placeholder="请选择" clearable @visible-change="visibleChange" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首次参加工作时间">
            <el-date-picker v-model="formData.workingTimeForTheFirstTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="转正评价">
            <el-input v-model="formData.correctionEvaluation" :rows="6" resize="none" type="textarea" placeholder="1-300位字符" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 合同信息 -->
      <el-divider>合同信息</el-divider>
      <!-- 首次合同开始时间 现合同开始时间 -->
      <el-row>
        <el-col :span="12">
          <el-form-item class="formInfo" label="首次合同开始时间">
            <el-date-picker v-model="formData.initialContractStartTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首次合同结束时间">
            <el-date-picker v-model="formData.firstContractTerminationTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 现合同结束时间 合同期限 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="现合同开始时间">
            <el-date-picker v-model="formData.currentContractStartTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="现合同结束时间">
            <el-date-picker v-model="formData.closingTimeOfCurrentContract" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 合同期限 续签次数 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同期限">
            <el-select v-model="formData.contractPeriod" class="filter-item">
              <el-option v-for="item in EmployeeEnum.contractPeriod" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="续签次数">
            <el-select v-model="formData.renewalNumber" class="filter-item">
              <el-option v-for="item in EmployeeEnum.renewalCount" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider>招聘信息</el-divider>
      <!-- 其他招聘渠道 招聘渠道 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="其他招聘渠道">
            <el-select v-model="formData.otherRecruitmentChannels" placeholder="请选择">
              <el-option v-for="item in EmployeeEnum.resumeSource" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="招聘渠道">
            <el-select v-model="formData.recruitmentChannels" placeholder="请选择">
              <el-option v-for="item in EmployeeEnum.resumeSource" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 社招/校招 推荐企业/人 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="社招/校招">
            <el-select v-model="formData.socialRecruitment" placeholder="请选择">
              <el-option v-for="item in EmployeeEnum.hireSourceType" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐企业/人">
            <el-input v-model="formData.recommenderBusinessPeople" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 从业信息 -->
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="saveJob">保存更新</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import EmployeeEnum from '@/utils/constant/employees'
import { getEmpJobInfo, saveEmpJobInfo } from '@/api/employees'
import { getDepts } from '@/api/departments'
import { arrayToTree } from '@/utils'
import Axios from 'axios'
export default {
  name: 'EmployessJobInfo',
  data() {
    return {
      userId: this.$route.query.id,
      depts: [],
      EmployeeEnum,
      props: {
        lazy: true,
        expandTrigger: 'hover',
        lazyLoad(node, resolve) {
          Axios.get('/gaodeMapAPI/v3/config/district', {
            params: {
              keywords: node.value,
              subdistrict: '1',
              key: 'f7c1ee410753e832aad78bc5cf135351'
            }
          }).then(res => {
            const nodes = res.data.districts[0].districts.map(item => {
              return {
                value: item.name,
                label: item.name,
                leaf: item.level === 'district'
              }
            })
            resolve(nodes)
          })
        }
      },
      formData: {
        adjustmentAgedays: '', // 调整司龄天
        adjustmentOfLengthOfService: '', // 调整工龄天
        closingTimeOfCurrentContract: '', // 现合同结束时间
        companyId: '', // 公司ID
        contractDocuments: '', // 合同文件
        contractPeriod: '', // 合同期限
        correctionEvaluation: '', //  转正评价
        currentContractStartTime: '', // 现合同开始时间
        firstContractTerminationTime: '', // 首次合同结束时间
        hrbp: '', // HRBP
        initialContractStartTime: '', // 首次合同开始时间
        otherRecruitmentChannels: '', // 其他招聘渠道
        post: '', // 岗位
        rank: null, // 职级
        recommenderBusinessPeople: '', // 推荐企业人
        recruitmentChannels: '', // 招聘渠道
        renewalNumber: '', // 续签次数
        reportId: '', // 汇报对象
        reportName: null, // 汇报对象
        socialRecruitment: '', // 社招校招
        stateOfCorrection: '', // 转正状态
        taxableCity: '', // 纳税城市
        userId: '', // 员工ID
        workMailbox: '', // 工作邮箱
        workingCity: '', // 工作城市
        workingTimeForTheFirstTime: '' // 首次参加工作时间
      },
      temp1: ''
    }
  },
  async created() {
    const result = await getEmpJobInfo(this.$route.query.id)
    this.temp1 = result.data.workingCity ? result.data.workingCity.split(' ') : ''
    this.formData = result.data
    const deptsResult = await getDepts()
    this.depts = arrayToTree(deptsResult.data.depts, '')
  },
  methods: {
    async saveJob() {
      this.formData.workingCity = this.temp1.join(' ')
      await saveEmpJobInfo(this.formData)
    },
    // 解决 Chrome 对无障碍标签支持的BUG
    visibleChange() {
      this.$nextTick(() => {
        const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]')
        Array.from($el).map((item) => item.removeAttribute('aria-owns'))
      })
    }
  }
}
</script>

  <style scoped lang="scss">
  .job-info {
    .el-select,
    .el-input,
    .el-cascader {
      width: 100%;
    }
  }
  </style>
